<template>
  <div>
    <h1>视图3</h1>
    <h1 v-if="!isLoading && message">{{ message }}</h1>
    <p v-if="!isLoading && timestamp">时间: {{ timestamp }}</p>
    <p v-if="errorMessage" class="error-message">错误: {{ errorMessage }}</p>
    <p v-else-if="isLoading">加载中...</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      message: null, // 使用 null 来明确表示该数据可能尚未设置
      timestamp: null, // 同上
      isLoading: true,
      // 添加一个用于错误消息的 data 属性
      errorMessage: null,
    };
  },
  async created() {
    try {
      const response = await axios.get("/web/sample-data", {
        timeout: 5000,
      });

      // 确保响应数据存在且符合预期格式
      if (
        response.status === 200 &&
        response.data &&
        response.data.message &&
        response.data.timestamp
      ) {
        this.message = response.data.message;
        this.timestamp = response.data.timestamp;
      } else {
        // 如果响应不符合预期格式，处理为错误情况
        this.errorMessage = "数据格式错误";
      }
    } catch (error) {
      console.error("Error fetching data:", error);
      // 将错误信息保存起来
      if (error.response) {
        // 如果请求已发出，但服务器响应的状态码不在 2xx 范围内
        this.errorMessage = `HTTP 错误 ${error.response.status}`;
      } else if (error.request) {
        // 请求已发出，但没有收到响应
        this.errorMessage = "请求已发出，但没有收到响应";
      } else {
        // 发送请求时发生了某些事情，导致请求没有发出
        this.errorMessage = "网络错误";
      }
    } finally {
      this.isLoading = false; // 确保在 finally 块中设置 isLoading 为 false
    }
  },
};
</script>

<style scoped>
.error-message {
  color: red;
  /* 您可以根据需要添加更多的样式 */
}
</style>
